<template>
  <lb-layout>
    <div class="servicenavigation-top">
      <div class="jurisdiction">
        {{
          type === 1
            ? "能耗管理部门"
            : type === 2
            ? "用能部门"
            : type === 3
            ? "财务部门"
            : ""
        }}
      </div>
    </div>
    <el-card class="mt10">
      <Title
        :name="
          type === 3
            ? '能耗预算管理'
            : type === 2
            ? '智慧能耗用能'
            : '智慧能耗治理'
        "
        :line="false"
      >
        <div class="zhnh-box">
          <div v-for="(item, index) in topList" :key="index">
            <div v-if="item.type === 1" class="zhnh-content">
              <div
                v-for="(it, idx) in item.children"
                :key="idx"
                :class="it.disabled ? 'zhnh-title disabled' : 'zhnh-title'"
                @click="toPath(it)"
              >
                <img :src="it.icon" alt="" />
                <div>{{ it.name }}</div>
              </div>
            </div>
            <div v-if="item.type === 2" class="arrows">
              <img :src="item.icon" alt="" />
            </div>
          </div>
        </div>
      </Title>
    </el-card>
    <el-card v-if="type === 3" class="mt10">
      <Title name="能耗治理标准规范、培训平台" :line="false">
        <div class="fqfl-box">
          <div v-for="(item, index) in czList" :key="index">
            <div class="fqfl-content">
              <div
                v-for="(it, idx) in item.children"
                :key="idx"
                :class="it.disabled ? 'fqfl-title disabled' : 'fqfl-title'"
                @click="toPath(it)"
              >
                <img :src="it.icon" alt="" />
                <div>{{ it.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </Title>
    </el-card>
    <el-row v-else :gutter="20" style="margin: 0">
      <el-col :span="14" style="padding-left: 0">
        <el-card class="mt10">
          <Title name="能耗分区分类分项计量" :line="false">
            <div class="fqfl-box">
              <div v-for="(item, index) in fqflList" :key="index">
                <div class="fqfl-content">
                  <div
                    v-for="(it, idx) in item.children"
                    :key="idx"
                    :class="it.disabled ? 'fqfl-title disabled' : 'fqfl-title'"
                    @click="toPath(it)"
                  >
                    <img :src="it.icon" alt="" />
                    <div>{{ it.name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </Title>
        </el-card>
      </el-col>
      <el-col :span="10" style="padding-right: 0">
        <el-card class="mt10">
          <Title name="能耗治理标准规范、培训平台" :line="false">
            <div class="fqfl-box">
              <div v-for="(item, index) in nhzlList" :key="index">
                <div class="fqfl-content">
                  <div
                    v-for="(it, idx) in item.children"
                    :key="idx"
                    :class="it.disabled ? 'fqfl-title disabled' : 'fqfl-title'"
                    @click="toPath(it)"
                  >
                    <img :src="it.icon" alt="" />
                    <div>{{ it.name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </Title>
        </el-card>
      </el-col>
    </el-row>
  </lb-layout>
</template>

<script>
import auth from "@/plugins/auth";
export default {
  components: {},
  data() {
    return {
      type: 1, // 1 能耗部门 2用能部门 3 财政部门
      topList: [
        {
          type: 1,
          children: [
            {
              disabled: true,
              url: "/iot/network",
              icon: require("@/assets/images/index/servicenavigation/p11.png"),
              name: "能耗预算管理",
            },
          ],
        },
        {
          icon: require("@/assets/images/index/servicenavigation/arrows.png"),
          type: 2,
        },
        {
          type: 1,
          children: [
            {
              disabled: true,
              url: "/index",
              icon: require("@/assets/images/index/servicenavigation/p4.png"),
              name: "人工干预",
            },
          ],
        },
        {
          icon: require("@/assets/images/index/servicenavigation/arrows.png"),
          type: 2,
        },
        {
          type: 1,
          children: [
            {
              disabled: true,
              url: "/index",
              icon: require("@/assets/images/index/servicenavigation/p12.png"),
              name: "可使用预算额度",
            },
          ],
        },
      ],
      fqflList: [
        {
          type: 1,
          children: [
            {
              disabled: true,
              url: "/iot/energy",
              icon: require("@/assets/images/index/servicenavigation/p13.png"),
              name: "抄表流水",
            },
            {
              disabled: true,
              url: "/iot/inspect",
              icon: require("@/assets/images/index/servicenavigation/p27.png"),
              name: "实时监测",
            },
            {
              disabled: true,
              url: "/iot/inspect",
              icon: require("@/assets/images/index/servicenavigation/p21.png"),
              name: "能耗行为",
            },
          ],
        },
        {
          type: 1,
          children: [
            {
              disabled: true,
              url: "/system/dept",
              icon: require("@/assets/images/index/servicenavigation/p22.png"),
              name: "用能单位",
            },
            {
              disabled: true,
              url: "/iot/network",
              icon: require("@/assets/images/index/servicenavigation/p24.png"),
              name: "能耗网点",
            },
            {
              disabled: true,
              url: "/iot/archives",
              icon: require("@/assets/images/index/servicenavigation/p18.png"),
              name: "计量设备",
            },
          ],
        },
        {
          type: 1,
          children: [
            {
              disabled: true,
              url: "/iot/energy",
              icon: require("@/assets/images/index/servicenavigation/p17.png"),
              name: "应关未关",
            },
            {
              disabled: true,
              url: "/iot/inspect",
              icon: require("@/assets/images/index/servicenavigation/p20.png"),
              name: "离线计量设备",
            },
            {
              disabled: true,
              url: "/iot/inspect",
              icon: require("@/assets/images/index/servicenavigation/p19.png"),
              name: "跳闸计量设备",
            },
          ],
        },
      ],
      nhzlList: [
        {
          type: 1,
          children: [
            {
              disabled: true,
              url: "/energyconsumption/quota",
              icon: require("@/assets/images/index/servicenavigation/p15.png"),
              name: "额度管理标准",
            },
            {
              disabled: true,
              url: "/energyconsumption/energyCoal",
              icon: require("@/assets/images/index/servicenavigation/p26.png"),
              name: "预算管理标准",
            },
            {
              disabled: true,
              url: "/energyconsumption/unitprice",
              icon: require("@/assets/images/index/servicenavigation/p14.png"),
              name: "能耗单价管理",
            },
          ],
        },
        {
          type: 1,
          children: [
            {
              disabled: true,
              url: "/energyconsumption/solarTerms",
              icon: require("@/assets/images/index/servicenavigation/p23.png"),
              name: "24节气参数",
            },
            {
              disabled: true,
              url: "/energyconsumption/earlyWarning",
              icon: require("@/assets/images/index/servicenavigation/p23.png"),
              name: "智能预警规则",
            },
            {
              disabled: true,
              url: "/quota/conference/consultation",
              icon: require("@/assets/images/index/servicenavigation/p16.png"),
              name: "考核会商机制",
            },
          ],
        },
      ],
      czList: [
        {
          type: 1,
          children: [
            {
              disabled: true,
              url: "/energyconsumption/quota",
              icon: require("@/assets/images/index/servicenavigation/p15.png"),
              name: "额度管理标准",
            },
            {
              disabled: true,
              url: "/energyconsumption/energyCoal",
              icon: require("@/assets/images/index/servicenavigation/p26.png"),
              name: "预算管理标准",
            },
          ],
        },
      ],
    };
  },
  created() {
    this.judgeRole();
  },
  methods: {
    judgeRole() {
      if (auth.hasRole("nhgl_user") || auth.hasRole("nhgl_leader")) {
        this.type = 1;
        this.name = "能耗管理部门";
        this.topList = [
          {
            type: 1,
            children: [
              {
                disabled: true,
                url: "/iot/energy",
                icon: require("@/assets/images/index/servicenavigation/p1.png"),
                name: "终端能耗流水",
              },
            ],
          },
          {
            icon: require("@/assets/images/index/servicenavigation/arrows.png"),
            type: 2,
          },
          {
            type: 1,
            children: [
              {
                disabled: true,
                url: "/quota/limit/allocation",
                icon: require("@/assets/images/index/servicenavigation/p2.png"),
                name: "能耗额度管理",
              },
              {
                icon: require("@/assets/images/index/servicenavigation/p11.png"),
                name: "能耗预算管理",
                disabled: true,
                url: "/quota/limit/budget",
              },
              {
                icon: require("@/assets/images/index/servicenavigation/p3.png"),
                name: "能耗公摊管理",
                disabled: true,
                url: "/quota/limit/pooled",
              },
              {
                icon: require("@/assets/images/index/servicenavigation/p3.png"),
                name: "能耗额度评估",
                disabled: true,
                url: "/quota/limit/energy",
              },
            ],
          },
          {
            icon: require("@/assets/images/index/servicenavigation/arrows.png"),
            type: 2,
          },
          {
            type: 1,
            children: [
              {
                disabled: true,
                url: "/quota/forewarningModel/statisticAnalysi",
                icon: require("@/assets/images/index/servicenavigation/p5.png"),
                name: "能耗诊断",
              },
              {
                icon: require("@/assets/images/index/servicenavigation/p4.png"),
                name: "人工干预",
                disabled: true,
                url: "/quota/forewarningModel/alarmCommand",
              },
            ],
          },
          {
            icon: require("@/assets/images/index/servicenavigation/arrows.png"),
            type: 2,
          },
          {
            type: 1,
            children: [
              {
                disabled: true,
                url: "/quota/analyse/winddirection",
                icon: require("@/assets/images/index/servicenavigation/p9.png"),
                name: "楼宇能耗概况",
              },
              {
                icon: require("@/assets/images/index/servicenavigation/p7.png"),
                name: "机关能耗",
                disabled: true,
                url: "/quota/analyse/winddirection",
              },
              {
                icon: require("@/assets/images/index/servicenavigation/p6.png"),
                name: "分区分项能耗",
                disabled: true,
                url: "/quota/analyse/winddirection",
              },
              {
                icon: require("@/assets/images/index/servicenavigation/p8.png"),
                name: "预警应对建议方案",
                disabled: true,
                url: "/quota/forewarningModel/alarmCommand",
              },
              {
                icon: require("@/assets/images/index/servicenavigation/p10.png"),
                name: "碳中和建议方案",
                disabled: true,
                url: "/carbonNeutral/government",
              },
            ],
          },
        ];
      } else if (auth.hasRole("ynbm_user") || auth.hasRole("ynbm_leader")) {
        this.type = 2;
        this.topList = [
          {
            type: 1,
            children: [
              {
                disabled: true,
                url: "/iot/energy",
                icon: require("@/assets/images/index/servicenavigation/p1.png"),
                name: "本单位终端能耗流水",
              },
            ],
          },
          {
            icon: require("@/assets/images/index/servicenavigation/arrows.png"),
            type: 2,
          },
          {
            type: 1,
            children: [
              {
                disabled: true,
                url: "/quota/limit/allocation",
                icon: require("@/assets/images/index/servicenavigation/p2.png"),
                name: "本单位能耗额度管理",
              },
              {
                icon: require("@/assets/images/index/servicenavigation/p11.png"),
                name: "本单位能耗预算管理",
                disabled: true,
                url: "/quota/limit/budget",
              },
            ],
          },
          {
            icon: require("@/assets/images/index/servicenavigation/arrows.png"),
            type: 2,
          },
          {
            type: 1,
            children: [
              {
                disabled: true,
                url: "/quota/forewarningModel/statisticAnalysi",
                icon: require("@/assets/images/index/servicenavigation/p5.png"),
                name: "本单位能耗诊断",
              },
              {
                icon: require("@/assets/images/index/servicenavigation/p4.png"),
                name: "本单位人工干预",
                disabled: true,
                url: "/quota/forewarningModel/alarmCommand",
              },
            ],
          },
          {
            icon: require("@/assets/images/index/servicenavigation/arrows.png"),
            type: 2,
          },
          {
            type: 1,
            children: [
              {
                disabled: true,
                url: "/quota/analyse/winddirection",
                icon: require("@/assets/images/index/servicenavigation/p9.png"),
                name: "本单位楼宇能耗概况",
              },
              {
                icon: require("@/assets/images/index/servicenavigation/p7.png"),
                name: "本单位机关能耗",
                disabled: true,
                url: "/quota/analyse/winddirection",
              },
              {
                icon: require("@/assets/images/index/servicenavigation/p6.png"),
                name: "本单位分区分项能耗",
                disabled: true,
                url: "/quota/analyse/winddirection",
              },
              {
                icon: require("@/assets/images/index/servicenavigation/p8.png"),
                name: "本单位预警应对建议方案",
                disabled: true,
                url: "/quota/forewarningModel/alarmCommand",
              },
              {
                icon: require("@/assets/images/index/servicenavigation/p10.png"),
                name: "本单位碳中和建议方案",
                disabled: true,
                url: "/carbonNeutral/government",
              },
            ],
          },
        ];
      } else if (auth.hasRole("czbm_leader")) {
        this.name = "财务部门";
        this.type = 3;
        this.topList = [
          {
            type: 1,
            children: [
              {
                disabled: true,
                url: "/quota/limit/budget",
                icon: require("@/assets/images/index/servicenavigation/p11.png"),
                name: "能耗预算管理",
              },
            ],
          },
          {
            icon: require("@/assets/images/index/servicenavigation/arrows.png"),
            type: 2,
          },
          {
            type: 1,
            children: [
              {
                disabled: true,
                url: "/quota/forewarningModel/alarmCommand",
                icon: require("@/assets/images/index/servicenavigation/p4.png"),
                name: "人工干预",
              },
            ],
          },
          {
            icon: require("@/assets/images/index/servicenavigation/arrows.png"),
            type: 2,
          },
          {
            type: 1,
            children: [
              {
                disabled: true,
                url: "/quota/limit/budget",
                icon: require("@/assets/images/index/servicenavigation/p12.png"),
                name: "可使用预算额度",
              },
            ],
          },
        ];
      }
      this.topList = this.hanldeReset(this.topList);
      console.log(this.topList);
      this.czList = this.hanldeReset(this.czList);
      this.fqflList = this.hanldeReset(this.fqflList);
      this.nhzlList = this.hanldeReset(this.nhzlList);
    },
    hanldeReset(arr) {
      const tiledRouters = this.$store.state.permission.tiledRouters;
      let list = arr.map((item) => {
        if (item.type === 1) {
          item.children.map((it) => {
            it.disabled = tiledRouters.includes(it.url) === true ? false : true;
            return it;
          });
        }
        return item;
      });
      return list;
    },
    toPath(data) {
      if (data.disabled) {
        return false;
      }
      this.$router.push(data.url).catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .title-container {
  padding: 0 !important;
}
.servicenavigation-top {
  width: 100%;
  height: 120px;
  border-radius: 6px;
  overflow: hidden;
  background: url("~@/assets/images/index/servicenavigation/servicenavigation-bg.png")
    center bottom no-repeat;
  background-size: 100% 100%;
  position: relative;

  .jurisdiction {
    width: 136px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    background: #10B767;
    border-radius: 4px;
    position: absolute;
    top: 20px;
    right: 20px;
  }
}

.zhnh-box {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;

  .zhnh-content {
    width: 240px;
    height: 280px;
    padding: 20px;
    background: rgba(36, 120, 124, 0.04);
    border-radius: 8px;
    display: flex;
    // justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;

    .zhnh-title {
      display: flex;
      // justify-content: center;
      align-items: center;
      font-size: 18px;
      box-sizing: border-box;
      margin: 6px 0;
      cursor: pointer;

      &:hover {
        color: #10B767;
      }

      img {
        width: 44px;
        height: 44px;
        margin-right: 6px;
      }
    }

    .disabled {
      color: #c0c4cc;
      cursor: not-allowed;

      &:hover {
        color: #c0c4cc;
      }
    }
  }

  .arrows {
    margin: 0 20px;
  }
}

.fqfl-box {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;

  .fqfl-content {
    width: 240px;
    height: 220px;
    padding: 20px;
    background: rgba(36, 120, 124, 0.04);
    border-radius: 8px;
    display: flex;
    // justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;

    .fqfl-title {
      width: 210px;
      height: 44px;
      padding: 0 30px;
      background: #ffffff;
      border-radius: 30px;
      display: flex;
      // justify-content: center;
      align-items: center;
      font-size: 18px;
      box-sizing: border-box;
      margin: 6px 0;
      cursor: pointer;

      &:hover {
        color: #10B767;
      }

      img {
        width: 24px;
        height: 24px;
        margin-right: 6px;
      }
    }

    .disabled {
      color: #c0c4cc;
      cursor: not-allowed;

      &:hover {
        color: #c0c4cc;
      }
    }
  }

  .arrows {
    margin: 0 20px;
  }
}
</style>
